<template>
  <div class="roots">
    <!-- 标题 -->
    <el-row>
      <el-col :span="24"><p> </p></el-col>
    </el-row>
    <div class="fill">
      <el-row type="flex" class="fill">
        <!-- 左边的 Logo图 -->
        <el-col :span="12">
          <div class="logos">
            <img src="@/assets/Review.png" alt="" />
          </div>
        </el-col>
        <!-- 右边的登录框 -->
        <el-col :span="12">
          <div class="logins">
            <p class="hello">欢迎回来</p>
            <el-form :label-position="labelPosition" :model="formLabelAlign" ref="ruleForm">
              <el-form-item label="账号/手机号码" label-width="20px" >
                <el-input
                  v-model="formLabelAlign.account"
                  placeholder="账号/手机号码"
                ></el-input>
              </el-form-item>
              <el-form-item label="登陆密码" label-width="20px">
                <el-input
                type="password"
                  v-model="formLabelAlign.passwrod"
                  placeholder="登陆密码"
                ></el-input>
              </el-form-item>
            </el-form>
            <el-checkbox v-model="checked">记住我</el-checkbox>
            <div class="submi">
              <el-button type="primary" size="medium" @click="submitForm">登录</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/login.js'
export default {
  data () {
    return {
      labelPosition: 'top',
      checked: false,
      formLabelAlign: {
        account: '',
        passwrod: ''
      }
    }
  },
  created () {
    console.log('15100000000')
    const ser = JSON.parse(localStorage.getItem('rememberme'))
    if (ser !== null) {
      this.checked = true
      this.formLabelAlign = ser
    }
  },
  methods: {
    async submitForm () {
      if (this.formLabelAlign.account.length === 0) {
        this.$message({
          message: '请输入账号/手机号码',
          type: 'error'
        })
        return false
      } else if (this.formLabelAlign.passwrod.length === 0) {
        this.$message({
          message: '请输入密码',
          type: 'error'
        })
        return false
      }
      const ser = await login(this.formLabelAlign)
      if (ser?.code === 200) {
        const { data: { platform, name }, code } = ser
        localStorage.setItem('userStatus', name)
        localStorage.setItem('platform', platform)
        if (code === 200) {
          this.$message({
            message: '登陆成功',
            type: 'success'
          })
          if (this.checked) {
            localStorage.setItem('rememberme', JSON.stringify(this.formLabelAlign))
          } else {
            localStorage.removeItem('rememberme')
          }
          if (platform === 0) {
            this.$router.push('/home')
          } else {
            this.$router.push('/organizationPort')
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.submi {
  width: 400px;
  height: 48px;
  margin-top: 24px;
    /deep/ .el-button--primary{
      color:#fff;
      background-color:#4F4FED;
      border-color:#4F4FED;
    }
    /deep/ .el-button--primary:hover{
    background-color:#4F4FED;
    border-color:#4F4FED;
    }
    /deep/ .el-button--primary:focus{
    background-color:#4F4FED;
    border-color:#4F4FED;
    }
  /deep/ button {
    width: 100%;
    height: 100%;
  }
}
.roots {
  padding: 42px 7vw;
}
.hello {
  text-align: center;
}
.fill {
  width: 100%;
    height: 620px;
}
.logins {
  width: 100%;
  height: 100%;
  padding: 130px;
  box-sizing: border-box;
  // display: flex;
  // align-items: center;
  // justify-content: center;
}
.logos {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
img {
  width: 488.72px;
    height: 434.85px;
}
p {
  font-weight: 600;
    font-size: 24px;
    line-height: 34px;
    color: #000000;
}
</style>
